@charset "UTF-8";
/* -------------------------------------------------
 * header css
 * ------------------------------------------------- */

.wrap-header {
    font-family: "Lato", Arial, sans-serif;
    padding: 0;
    position: relative;
    transform: translateY(0%);
    transition: all 0.5s ease 0s;
    width: 100%;
    height: 110px;
    z-index: 100;
    background-color: $white;
    border-bottom: 1px solid $grayLightColor;
}

#top-panel {
    height: 40px;
    border-bottom: 1px solid $grayLightColor;
    font-family: "Microsoft Yahei",Arial,sans-serif;
    .top-panel-container{
        @include boxCenter;
        position: relative;
        .log-box {
            position: absolute;
            right: 0;
            top: 0;
            line-height: $topPanel;
            .login-panel, .logout-panel {
                display: inline-block;
                position: relative;
            }
            .logout-panel {
                padding-right: 32px;
            }
            a {
                color: $themeColor;
                text-decoration: none;
            }
            .logout-icon {
                position: absolute;
                right: 0;
                top: 7px;
                width: 27px;
                height: 24px;
                background: url(../img/logout.png) no-repeat center;
                cursor: pointer;
            }
            span.division {
                color: $themeColor;
            }
            span.person-shortcut{
                display: inline-block;
                width: 40px;
                height: 40px;
                text-align: center;
                vertical-align: top;
                overflow: hidden;
                border-radius: 50%;
                box-shadow: 0 0 1px rgba(0,0,0,0.1);
            }
        }
    }
    .header_avatar {
        width: 32px;
        height: 32px;
    }
    .current-info{
        line-height: $topPanel;
        text-align: center;
        color: $subThemeColor;
        strong{
            color: $themeColor;
        }
        a{
            color: $subThemeColor;
            font-weight: 500;
            padding: 0 0.25em;
            transition: color 0.2s ease 0s;
            position: relative;
            font-size: 1em;
            @include linkHover;
        }
    }
}

#header {
    height: 70px;
    .logo-box {
        position: absolute;
        left: -92px;
        top: -41px;
        a, span {
            display: inline-block;
            display: inline \9;
            float: left;
            overflow: hidden;
            height: 100%;
            height: 110px \9;
            img {
                display: inline;
                width: 92px;
                height: 92px;
            }
        }
        a {
            text-decoration: none;
            width: 110px \9;
        }
    }
}

.ha-header-perspective {
    position: relative;
    z-index: 2;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;
    perspective: 1100px;
    -webkit-perspective-origin: 50% 0;
    -moz-perspective-origin: 50% 0;
    perspective-origin: 50% 0;
    text-align: justify;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

#search-panel {
    position: absolute;
    right: 30px;
    top: 65px;
    z-index: 100;
    i.fa{
        color: $white;
        margin: 0;
    }
    .share-attention{
        display: inline-block;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        margin-left: 30px;
        position: relative;
        background-color: $themeColor;
        .drop-share{
            width: 120px;
            height: 120px;
            position: absolute;
            right: -5px;
            top: 42px;
            background: rgba(255,255,255,0.25);
            padding: 5px;
            transform: translateY(40px);
            visibility: hidden;
            opacity: 0;
            transition: transform 0.25s ease-in-out 0s,opacity 0.25s ease-in-out 0s;
            &.see-code{
                opacity: 1;
                visibility: visible;
                transform: translateY(0px);
            }
        }
    }
    #search-box {
        float: left;
        overflow: hidden;
        input[type='text'] {
            float: left;
            display: inline-block;
            width: 0px;
            margin-right: -3px;
            height: 28px;
            line-height: 28px;
            text-indent: 10px;
            border: 1px solid $themeColor;
            background-color: transparent;
            box-sizing: border-box;
            transition: width 0.25s ease-in-out 0s;
            &:hover, &:focus {
                background-color: $white;
                width: 300px;
                &::-webkit-input-placeholder {
                    color: $defaultColor;
                }
                &::-moz-placeholder {
                    color: $defaultColor;
                }
            }
            &::-webkit-input-placeholder {
                color: $themeColor;
            }
            &::-moz-placeholder {
                color: $themeColor;
            }
        }
        &:hover {
            input[type='text'] {
                background-color: $white;
                width: 300px;
                &::-webkit-input-placeholder {
                    color: $defaultColor;
                }
                &::-moz-placeholder {
                    color: $defaultColor;
                }
            }
        }
        .search-submit {
            float: left;
            display: inline-block;
            background-color: $themeColor;
            height: 28px;
            width: 28px;
            line-height: 28px;
            float: left;
            border: none;
            text-align: center;
            i {
                color: $white;
                display: inline-block;
                margin-top: -15px;
            }
        }
    }
}
